From 56878f647ea0f1066fa3e222d7aa0d83057f496d Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 13 Nov 2023 17:45:59 +0100
Subject: refactor(components): rewrite PostsList component

* remove NoResults component and move logic to Search page
* add a usePostsList hook
* remove Pagination from PostsList (it is only used if javascript is
disabled and not on every posts list)
* replace `byYear` prop with `sortByYear`
* replace `loadMore` prop with `onLoadMore`
* remove `showLoadMoreBtn` (we can use `loadMore` prop instead to
determine if we need to display the button)
* replace `titleLevel` prop with `headingLvl`
* add `firstNewResult` prop to handle focus on the new results when
loading more article (we should not focus a useless span but the item
directly)
---
 src/pages/blog/page/[number].tsx | 71 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 65 insertions(+), 6 deletions(-)

(limited to 'src/pages/blog/page/[number].tsx')

diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index 1c723f1..842c2b8 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -4,6 +4,7 @@ import type { GetStaticPaths, GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
+import { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import {
   getLayout,
@@ -12,6 +13,9 @@ import {
   type MetaItemData,
   PageLayout,
   PostsList,
+  Pagination,
+  type RenderPaginationLink,
+  type RenderPaginationItemAriaLabel,
 } from '../../../components';
 import {
   getArticles,
@@ -131,7 +135,54 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     description: 'BlogPage: topics list widget title',
     id: '2D9tB5',
   });
-  const postsListBaseUrl = `${ROUTES.BLOG}/page/`;
+  const renderPaginationLink: RenderPaginationLink = useCallback(
+    (pageNum) => `${ROUTES.BLOG}/page/${pageNum}`,
+    []
+  );
+  const renderPaginationLabel: RenderPaginationItemAriaLabel = useCallback(
+    ({ kind, pageNumber: number, isCurrentPage }) => {
+      switch (kind) {
+        case 'backward':
+          return intl.formatMessage(
+            {
+              defaultMessage: 'Go to previous page, page {number}',
+              description: 'BlogPage: previous page label',
+              id: 'faO6BQ',
+            },
+            { number }
+          );
+        case 'forward':
+          return intl.formatMessage(
+            {
+              defaultMessage: 'Go to next page, page {number}',
+              description: 'BlogPage: next page label',
+              id: 'oq3BzP',
+            },
+            { number }
+          );
+        case 'number':
+        default:
+          return isCurrentPage
+            ? intl.formatMessage(
+                {
+                  defaultMessage: 'Current page, page {number}',
+                  description: 'BlogPage: current page label',
+                  id: 'JL6G22',
+                },
+                { number }
+              )
+            : intl.formatMessage(
+                {
+                  defaultMessage: 'Go to page {number}',
+                  description: 'BlogPage: page number label',
+                  id: 'IVczxR',
+                },
+                { number }
+              );
+      }
+    },
+    [intl]
+  );
 
   const headerMeta: MetaItemData[] = totalArticles
     ? [
@@ -155,6 +206,12 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
       ]
     : [];
 
+  const paginationAriaLabel = intl.formatMessage({
+    defaultMessage: 'Pagination',
+    description: 'BlogPage: pagination accessible name',
+    id: 'AXe1Iz',
+  });
+
   return (
     <>
       <Head>
@@ -208,11 +265,13 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
           />,
         ]}
       >
-        <PostsList
-          baseUrl={postsListBaseUrl}
-          byYear={true}
-          pageNumber={pageNumber}
-          posts={getPostsList([articles])}
+        <PostsList posts={getPostsList([articles])} sortByYear />
+        <Pagination
+          aria-label={paginationAriaLabel}
+          current={pageNumber}
+          isCentered
+          renderItemAriaLabel={renderPaginationLabel}
+          renderLink={renderPaginationLink}
           total={totalArticles}
         />
       </PageLayout>
-- 
cgit v1.2.3

